<template>
  <el-space direction="vertical" size="large"  style="width: 100%;margin-top: 60px">
    <el-icon size="80">
      <ChromeFilled/>
    </el-icon>
    <el-text size="large" style="text-align: center">{{ $t('webAuto.OpenWithDrowser') }}</el-text>
    <el-link type="primary"  @click="openDefaultBrowser">{{ $t('webAuto.Reopen') }}</el-link>
    <el-text class="mx-1" type="info">{{ err_msg }}</el-text>
  </el-space>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { getWeiXinPermissionsValidationConfig } from "@/api/openDefaultBrowser.js";

// 声明变量
const paramObject = reactive({
  url: ''
})

const err_msg = ref("")
// 获取相关验证配置信息
const getConfig = () => {
  // 该paramUrl 为你使用微信sdk-js相关接口的页面地址 该地址需要配置到应用后台的可信域名下
  paramObject.url = window.location.href.split('#')[0]
  // paramObject.url = "http://api.eletile.com:18081"
  companyConfigInit()
}
// 企业验证配置
const companyConfigInit = () => {
  getWeiXinPermissionsValidationConfig(paramObject).then(response => {

    wx.config({
      beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
      debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: response.data.corpid, // 必填，企业微信的corpid，必须与当前登录的企业一致
      timestamp: response.data.timestamp, // 必填，生成签名的时间戳
      nonceStr: response.data.nonceStr, // 必填，生成签名的随机串
      signature: response.data.signature, // 必填，签名，见附录-JS-SDK使用权限签名算法
      jsApiList: ['openDefaultBrowser'] // 必填，传入需要使用的接口名称
    });
    wx.ready(function(){
      openDefaultBrowser()
    })
    wx.error(function(res){
      err_msg.value += res.err_msg +"<br>"
    })
  })
}



// 点击时间
const openDefaultBrowser = () => {
  wx.invoke('openDefaultBrowser', {
    // 在默认浏览器打开的uri，附加token参数
    'url': 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=ww4e24f6e208b1d9c0&redirect_uri=http://api.eletile.com:18081/#/&response_type=code&scope=snsapi_base&state=STATE&agentid=1000079#wechat_redirect'
  }, function (res) {
    if (res.err_msg !== 'openDefaultBrowser:ok') {
      // 错误处理
      err_msg.value += res.err_msg +"<br>"
    }
  })
}

onMounted(() => {
  getConfig()
})
</script>

<style scoped lang="less">

</style>